<template>
  <div class="consultation-pay-seek">
    <top-nav></top-nav>
    <div class="content-container">
      <!-- 左侧图片 -->
      <!-- <div class="left-image">
        <img src="../../../static/image/consult.png" alt="物流咨询图片">
      </div> -->
      
      <!-- 中间内容 -->
      <div class="middle-content" style="margin: 0 auto;">
        <div class="article">
          <div class="article-image">
            <img src="../../../static/image/pay1.png" alt="物流配送" style="width:100%;height:auto;">
          </div>
          <div class="article-content">
            <h2>物流配送付费全攻略：费用构成、查询方式与投诉维权</h2>
            <p>在当今商品流通频繁的时代，物流配送成为连接商家与消费者的关键纽带。无论是企业批量发货，还是个人邮寄物品，物流配送付费都是无法回避的环节。清晰了解物流配送的收费机制，既能帮您精准把控成本，又能有效规避不合理收费，让物流体验更加顺畅。</p>
          </div>
          <div class="article-button">
            <el-button type="primary" @click="showQRCode">查看详情</el-button>
          </div>
        </div>
        <div class="article">
          <div class="article-image">
            <img src="../../../static/image/pay2.png" alt="食品生鲜" style="width:100%;height:auto;">
          </div>
          <div class="article-content">
            <h2>入驻付费咨询全流程指南：从申请到运营的核心要点</h2>
            <p>在知识经济与服务专业化的趋势下，入驻付费咨询平台成为专业人士变现技能、企业拓展服务渠道的重要方式。无论是行业专家、技术顾问，还是企业服务团队，通过规范的入驻流程开启付费咨询业务，既能精准对接需求用户，也能建立标准化的服务价值体系。以下从入驻条件、流程步骤、运营要点三个维度，详解入驻付费咨询的核心内容。</p>
          </div>
          <div class="article-button">
            <el-button type="primary" @click="showQRCode">查看详情</el-button>
          </div>
        </div>
        <div class="article">
          <div class="article-image">
            <img src="../../../static/image/pay3.png" alt="数据分析" style="width:100%;height:auto;">
          </div>
          <div class="article-content">
            <h2>食品生鲜行业全解析：从入驻平台到配送服务</h2>
            <p>在互联网浪潮下，食品生鲜线上市场蓬勃发展，众多商家渴望入驻线上平台分得一杯羹。以京东生鲜为例，入驻条件较为严格。首先，申请人必须是持有《食品安全管理条例》规定的食品生产经营许可证的企业或个人，店铺所售食品要严格符合国家法律法规以及京东生鲜制定的标准，同时，营业执照上的经营范围需明确注明店铺的经营范畴。</p>
          </div>
          <div class="article-button">
            <el-button type="primary" @click="showQRCode">查看详情</el-button>
          </div>
        </div>
      </div> 
      <div class="right-button">
        <el-button type="primary" @click="showQRCode">查看详情</el-button>
      </div>
    </div>
    <!-- 二维码弹窗 -->
    <el-dialog title="即将前往详情咨询请扫码支付￥19.9元" :visible.sync="dialogVisible" width="25%" center>
      <div class="qr-code-container">
        <img src="../../../static/image/payQrcode.png" alt="支付二维码">
        <p>请使用微信或支付宝扫码支付</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" >取消</el-button>
        <el-button @click="dialogVisibleConfrim"  type="primary">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TopNav from '@/components/base/topNav.vue'

export default {
  components: {
    TopNav
  },
  name: 'ConsultationPaySeek',
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    dialogVisibleConfrim(){
      this.$message.error('请先支付');
    },
    showQRCode() {
      this.dialogVisible = true;
    }
  },
  mounted() {
    // 页面加载完成后的操作
  }
}
</script>
<style scoped>
.consultation-pay-seek {
  font-family: 'Microsoft YaHei', sans-serif;
}

.content-container {
  display: flex;
  margin-top: 30px;
  gap: 20px;
}

.left-image {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.left-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.middle-content {
  width: 69%; /* 原来的60% + 右侧按钮的15% */
}

.article {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;  /* 设置为flex布局 */
  gap: 20px;      /* 图片和内容之间的间距 */
  align-items: stretch; /* 让子元素高度相同 */
  position: relative; /* 相对定位，用于按钮的绝对定位 */
}

.article-image {
  width: 18%;  /* 图片宽度进一步缩小 */
  display: flex;
  align-items: center; /* 垂直居中图片 */
}

.article-image img {
  max-width: 100%;
  max-height: 100%;  /* 图片最大高度不超过容器高度 */
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  object-fit: cover;  /* 保持图片比例，可能会裁剪图片 */
}

.article-content {
  width: 70%;  /* 内容宽度相应增加 */
}

.article h2 {
  color: #333;
  font-size: 18px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.article p {
  color: #666;
  line-height: 1.6;
  font-size: 14px;
}

.article-button {
  position: absolute;
  bottom: 20px;
  right: 150px;
}

.right-button {
  display: none; /* 隐藏原来的右侧按钮区域 */
}

.qr-code-container {
  text-align: center;
  padding: 20px 0;
}

.qr-code-container img {
  width: 200px;
  height: 200px;
  margin-bottom: 15px;
}

.qr-code-container p {
  color: #666;
  font-size: 14px;
}
</style>
</template>